<template>
	<view class="clerk">
		<view class="clerk_qq">
			<img src="../../static/search-icon.png" alt="">
			<input class="clerk_q1" type="text" placeholder="输入你要搜索的内容" >
			<button class="clerk_q2" @click="add_salesclerk">添加理货员</button>
		</view>
		<view class='clerk_q3'>共计店员数量{{xx}}人</view>
		<view class="clerk_text" v-for="(item,index) in clerk_info_list" :key="index">
			<view class="clerk_textq">
				<view class="clerk_textq1">{{item.name}}</view>
				<view class="">{{item.phone}}</view>
			</view>
			
			<view class="clerk_textq">
				<span class="">角色权限：</span>
				<span class="">理货员</span>
				<button class="clerk_btn" @click="delete_fn(item.clerk_id)">删除</button>
			</view>
			<view class="clerk_textq">
				<span class="">创建时间：</span>
				<span class="">{{item.create_time}}</span>
			</view>
		</view>
		
						
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clerk_info_list:[],
				xx:''
			}
		},
		onLoad() {
			uni.request({
				url:'http://localhost:3000/query_clerk_info',
				success: (res) => {
					console.log(res.data),
					this.clerk_info_list=res.data,
					console.log(this.clerk_info_list);
					this.xx=this.clerk_info_list.length
				}
			})
		},
		methods: {
			add_salesclerk(){
			uni.navigateTo({
				url: '/pages/gao/add_salesclerk'
			        });
			},
			delete_fn(cc){
				console.log(cc);
				
				uni.request({
					url:'http://localhost:3000/delete_clerk_info',
					data:{
						cc:cc
					},
					success: (res) => {
						console.log(res.data)
					}
				}),
				location.reload()
			}
		}
	}
</script>

<style>
	.clerk{
		width: 95%;
		margin: 0 auto;
	}
	.clerk_qq{
		display: flex;
		margin-top: 20px;
		
		
	}
	.clerk_q1{
		height: 44px;
		flex: 8;
		background-color: aliceblue;
		margin-right: 10px;
		padding-left: 40px;
		border-radius: 5px;
	}
	.clerk_q2{
		height: 44px;
		flex: 2;
		background-color:  #fccc04;
		font-size: 12px;
		line-height: 44px;
		padding: 0px 5px 0px 5px;
		
	}
	img{
		position: absolute;
		width: 30px;
		margin-top: 5px;
		margin-left: 5px;
		
	}
	.clerk_q3{
		margin-top: 10px;
		margin-bottom: 10px;
		color: red;
		font-weight: bold;
	}
	.clerk_text{
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid black;
		
	}
	.clerk_textq{
		display: flex;
		margin-top: 5px;
		margin-bottom: 5px;
		
	}
	.clerk_textq1{
		margin-right: 30px;
	}
	.clerk_btn{
		position: absolute;
		right: 5%;
		
		
		background-color: red;
		color: white;
		height: 33px;
		line-height: 33px;
	}
</style>